<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>


<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Mootools menu with accordeon and hover effects</title>

<meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
<meta name="Identifier-url" content="http://www.artviper.de/mootoolsmenu">
<meta http-equiv="Content-Language" content="en">
<meta name="keywords" content="mootools menu, accordeon, hover, mootools">
<meta name="author" content="artViper desginstudio, Weiden, Germany">
<meta name="description" content="Mootools hover menu with accordeon sub menus.">
<meta name="audience" content="all">
<meta name="revisit-after" content="1 day">
<meta name="ICBM" content="49.67901452429961, 12.16435432434082">
<meta name="page-topic" content="Webdesign Weiden, Webdesign, Grafikdesign, Printmedien, Programmierung, AJAX, Scripts, PHP">
<meta name="language" content="en">
<meta name="copyright" content="artViper designstudio Webdesign, Grafikdesign Printmedien designstudio">
<meta name="publisher" content="artViper designstudio, Webdesign, Grafikdesign, Printmedien">
<meta name="generator" content="Macromedia Dreamweaver">
<script src="index_files/mootools.js" type="text/javascript" language="javascript"></script>

<style type="text/css">
<!--
#container {
	background: #333333;
	height: 600px;
	width: 980px;
	margin-right: auto;
	margin-left: auto;
}
#btmenu {
	color: #FFFFFF;
	background: #000000;
	height: 200px;
	width: 400px;
	margin-right: auto;
	margin-left: auto;
	font-size: 11px;
	position: absolute;
	margin-top: 500px;
}
#container #menu {
	height: auto;
	width: 350px;
	float: left;
}
body {
	overflow: auto;
	background: #333;
	color: #FFFFFF;
	font: 12px Arial, Helvetica, sans-serif;
}
#container h1 {
	font-size: 16px;
}
#container #menu li {
	display: block;
	list-style-type: none;
}
#container #menu a {
	font-size: 11px;
	color: #FFFFFF;
	padding-right: 10px;
	padding-left: 10px;
	line-height: 30px;
	text-decoration: none;
	background: #000000 url(bg.jpg) no-repeat left;
	height: 30px;
	width: 180px;
	display: block;
	outline:0;
	margin-bottom: 5px;
}
#container #menu a:hover {
	color: #CCFF00;
}
#popup {
	float: right;
	width: 300px;
	border: thin solid #666666;
	height: auto;
	background: #FFFFFF;
	visibility:hidden;
	font: 11.333px Arial, Helvetica, sans-serif;
	padding: 10px;
	margin-right: 20px;
}
#container #menu .accordion a {
	color: #FFCC00;
}
#container #menu .accordion a:hover {
	color: #FFFF00;
}

-->
</style></head><body>


<div id="container">
<div id="menu">
<ul>
<li><a href="#" title="" class="toggler">website design</a></li>
<div style="border-top: medium none; border-bottom: medium none; overflow: hidden; padding-top: 0px; padding-bottom: 0px; visibility: hidden; opacity: 0; height: 0px;" class="accordion">
	<a href="#" title="index.php">XHTML &amp; CSS</a>
    
	<a href="" title="index.php">Portfolio</a>
    <a href="" title="index.php">PHP programming</a>
    <a href="" title="index.php">AJAX programming</a>
</div>
<li><a href="#" class="toggler">graphic design</a></li>
<div style="border-top: medium none; border-bottom: medium none; overflow: hidden; padding-top: 0px; padding-bottom: 0px; visibility: hidden; opacity: 0; height: 0px;" class="accordion">
	<a href="#" title="index.php">graphic resources</a>
    	<a href="#" title="index.php" class="toggler2" id="newmenu">custom design</a>
        <div style="border-top: medium none; border-bottom: medium none; overflow: hidden; padding-top: 0px; padding-bottom: 0px; visibility: hidden; opacity: 0; height: 0px;" class="accordion2" id="newmenslide"><ul><li><a href="#" title="test.php">submenu 1</a></li>
			         <li><a href="#" title="test.php">submenu 2</a></li>
				 <li><a href="#" title="test.php">submenu 3</a></li></ul>
 				<p style="clear: both;">&nbsp;</p>
	</div>
        
<a href="#" title="index.php">logo design</a>
</div>
<li><a style="background: transparent url(bg.jpg) repeat scroll 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-left: 0px;" href="#" class="toggler">about us</a></li>
<div style="border-top: medium none; border-bottom: medium none; overflow: hidden; padding-top: 0px; padding-bottom: 0px; visibility: hidden; opacity: 0; height: 0px;" class="accordion">
	<a href="">what we do</a>
    <a href="">imprint</a>
</div>
<li><a style="background: transparent url(bg.jpg) repeat scroll 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-left: 0px;" href="#">testimonials</a></li>
<li><a href="#">get in touch</a></li>
<li><a href="#">partner sites</a></li>
</ul>
</div>



<script language="javascript" type="text/javascript">
window.onload=function(){
$$('#menu a').each(function(el) { 
		el.addEvent('mouseenter',function(){
		p = el.innerHTML.toUpperCase();
		el.innerHTML = p;
		el.setStyle('background','url(bg1.jpg)');
		myEffect = el.effect('margin-left', {duration: 100,transition: Fx.Transitions.linear, wait: true}).start('10','30');
		})
		
		el.addEvent('mouseleave',function(){
		p = el.innerHTML.toLowerCase();
		el.innerHTML = p;
		el.setStyle('background','url(bg.jpg)');
		myEffect = el.effect('margin-left', {duration: 800,transition: Fx.Transitions.Bounce.easeOut, wait: true}).start('30','0');
		})
	
	})
	
	myStretch = document.getElementsByClassName('toggler');
	myStretcher = document.getElementsByClassName('accordion');
	
	// setup the accordion elements by clearing display styles	
	myStretcher.each(function(el){
		el.style.display = '';
	});
	
	
var ac = new Fx.Accordion(myStretch,myStretcher,
 
  {
		onActive: function(tog){
         tog.setStyle('color', '#ACDA4E');
		tog.setStyle('background-color', '#1d1d1d');
		tog.setStyle('cursor', 'help');
		
    },
    onBackground: function(tog){
       
		tog.setStyle('color', '#FFF');
		tog.setStyle('background-color', '#2d2d2d');
		tog.setStyle('cursor', 'help');
		
    },
		alwaysHide: true,
		start : 'all-closed',
	
		height: true,
		opacity : true			
	});
}

st = document.getElementsByClassName('toggler2');
	stc = document.getElementsByClassName('accordion2');
	
	// setup the accordion elements by clearing display styles	
	stc.each(function(el){
		el.style.display = '';
	});
	
var acc = new Fx.Accordion(st,stc,
 
  {
		onActive: function(tog){
         tog.setStyle('color', '#ACDA4E');
		tog.setStyle('background-color', '#1d1d1d');
		tog.setStyle('cursor', 'help');
		
    },
    onBackground: function(tog){
       
		tog.setStyle('color', '#FFF');
		tog.setStyle('background-color', '#2d2d2d');
		tog.setStyle('cursor', 'help');
		
    },
		alwaysHide: true,
		start : 'all-closed',
		opacity : true			
	});
	



</script>

</body></html>
